import { useEffect } from 'react';

import { useRequest } from 'ahooks';
import { Empty } from 'antd';
// import Bar from '@/components/chart/bar';
import ReactEcharts from 'echarts-for-react';
import 'echarts/lib/chart/bar';

import {
  equDefectStatisticsLevel,
  equDefectStatisticsStatus
} from '@/services/bizApi/shebaoquexianjiekou';

const EchartsBar = (props: { searchData: BIZAPI.EquDefectQuery; type: string }) => {
  // const [option, setOption] = useState();

  const { data, error, loading, run } = useRequest(async () => {
    return (await props.type) == 'level'
      ? equDefectStatisticsLevel(props.searchData as BIZAPI.EquDefectQuery)
      : equDefectStatisticsStatus(props.searchData as BIZAPI.EquDefectQuery);
  });
  // run();

  useEffect(() => {
    run();
  }, [props.searchData]);

  const xAxisData = data?.data?.map((item: { x?: string }) => item.x ?? '');
  const yAxisData = data?.data?.map((item: { y?: number }) => item.y);

  return (
    <>
      {xAxisData && xAxisData.length > 0 ? (
        <ReactEcharts
          style={{
            minWidth: '500px',
            height: '330px',
            margin: '0 auto'
          }}
          option={{
            tooltip: {
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                show: true,
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              show: true
            },
            xAxis: {
              type: 'category',
              data: xAxisData,
              axisLabel: {
                interval: 0, // 强制显示所有标签
                fontSize: 13,
                lineHeight: 16,
                // color: '#006C5A',
                formatter: function (value: string) {
                  // 每4个字符换行
                  return value.replace(/(.{4})/g, '$1\n');
                }
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: yAxisData,
                type: 'bar',
                barWidth: '30px',
                label: {
                  show: true, // 显示标签
                  position: 'top', // 标签位置（top, inside, outside等）
                  textStyle: {
                    fontSize: 14 // 设置字体大小为14
                  },
                  formatter: '{c}' // 显示数据值
                },
                itemStyle: {
                  color: '#00B091',
                  // function () {
                  //   // 使用线性渐变
                  //   const colorList = [
                  //     { offset: 0, color: '#3C9E8C' }, // 颜色起点
                  //     { offset: 0.5, color: '#4CA67F' }, // 颜色中间点
                  //     { offset: 1, color: '#006A5A' } // 颜色终点
                  //   ];
                  //   return new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList);
                  // },
                  borderRadius: [4, 4, 0, 0]
                }
              }
            ]
          }}
        />
      ) : (
        <Empty description="暂无数据" />
      )}
    </>
  );
};
export default EchartsBar;
